<template>
	<view class="all">
		<view class="top">
			<image class="back" src="@/static/back.png" mode="scaleToFill" @click="back"></image>
			<text class="text">
				{{text}}
			</text>
			<image class="add" src="@/static/add.png" mode="scaleToFill" @click="add"></image>
		</view>
		<view class="main">
			<view class="input">
				<image class="kuo" src="@/static/kuo.png" mode="scaleToFill"></image>
				<input class="inputs" type="text" value=""  placeholder="搜索"/>
			</view>
			<view class="message" @click="goInfoInfo">
			     <view class="every">
			     	<view class="name">
			     		设备名称:
			     		<text class="numberss">(001)</text>
			     	</view>
			     	<view class="number">
			     		设备号:
			     		<text class="numbers">EDH3877848</text>
			     	</view>
			     	<view class="location">
			     		<image class="map" src="@/static/map.png" mode="scaleToFill"></image>
			     		地理位置:
			     		<text class="numbers">
			     			北京市朝阳区建外SOHO东区B座
			     		</text>
			     	</view>
			     </view>
				 
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: "11111"
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			add() {
				uni.navigateTo({
					url: '../addInfo/addInfo'
				});
			},
			goInfoInfo() {
				uni.navigateTo({
					url: '../infoInInfo/infoInInfo'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// width: 100px;
		height: 100%;
		background-color: rgb(247, 247, 247);
	}
	.top {
		width: 100%;
		background-color: white;
		height: 100rpx;
		position: relative;

		.text {
			width: 190rpx;
			height: 50rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -70rpx;
			margin-top: -25rpx;
		}

		.back {
			width: 20rpx;
			height: 36rpx;
			position: absolute;
			left: 20rpx;
			top: 36rpx;
		}

		.add {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 5%;
			top: 30rpx;

		}

	}

	.main {
		// background-color: skyblue;
		width: 90%;
		height: 900rpx;
		margin: 0 auto;
		position: relative;
       
		.input {
			width: 98%;
			height: 84rpx;
			// border: 1rpx solid gray;
			background-color: white;
			border-radius: 50rpx;
			position: absolute;
			top: 30rpx;
			left: 5rpx;
			display: flex;

			.kuo {
				width: 50rpx;
				height: 50rpx;
				margin-top: 20rpx;
				margin-left: 15rpx;
			}

			.inputs {
				flex: 1;
				margin-top: 25rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}
		}
	}

	.message {
		width: 95%;
		background-color: white;
		position: absolute;
		top: 140rpx;
		left: 2.5%;
		// background-color: red;
		.every{
			border-radius: 3%;
			// background-color: pink;
			width: 100%;
			height: 230rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin: 30rpx auto;
		}

		.name {
			width: 243rpx;
			height: 45rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bolder;
			line-height: 45rpx;
			color: rgba(51, 51, 51, 1);
			opacity: 1;
			margin-left: 4%;
		}

		.number {
			width: 284rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: rgb(160, 160, 160);
			opacity: 1;
			margin-left: 4%;
		}

		.numbers {
			margin-left: 10rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: rgba(51, 51, 51, 1);
			opacity: 1;
		}
         .numberss{
			 font-weight: 500;
			 font-weight: bold;
		 }
		.location {
			margin-left: 4%;
			width: 100%;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: rgb(160, 160, 160);
			opacity: 1;

			.map {
				width: 22rpx;
				height: 30rpx;
				padding-right: 10rpx;
			}
		}
	}
</style>
